<!--
 * @Description: 重点行业
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-04-23 11:49:20
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-08-30 16:42:06

-->
<template>
    <div class="container full-screen">
        <!-- 1左侧 -->
        <div
            v-show="!epi.open_detail"
            class="left flexcbh position-re pro-bgcolor544 p-20"
        >
            <pro-title label="行业统计"></pro-title>

            <div
                class="left-content fx1 flexcbh"
                v-loading="loading"
                element-loading-background="rgba(0, 0, 0, 0.3)"
            >
                <div class="count fx2 flexrbh">
                    <div class="item fx1 flexccc m-r20">
                        <div>
                            <span class="num">{{
                                indStatsNsp.data.industryNum
                            }}</span>
                            <span class="unit">个</span>
                        </div>
                        <div class="label">行业数量</div>
                    </div>
                    <div class="item fx1 flexccc">
                        <div>
                            <span class="num">{{
                                indStatsNsp.data.peopleNum
                            }}</span>
                            <span class="unit">个</span>
                        </div>
                        <div class="label">从业人员总数</div>
                    </div>
                </div>
                <div class="chart_box fx3 flexrbc">
                    <div class="chart flexrcc f99 m-r10">
                        <pie-chart
                            :seriesData="indStatsNsp.seriesData"
                            :extraOption="indStatsNsp.extraOption"
                        ></pie-chart>
                    </div>
                    <div class="info fx1 flexcc">
                        <div class="item top flexrbc m-b20">
                            <span><span class="icon">▋</span>已检测总数</span>
                            <span class="num">{{
                                indStatsNsp.data.detectedNum
                            }}</span>
                            <span class="num"
                                >{{ indStatsNsp.data.detectedOdds }}%</span
                            >
                        </div>
                        <div class="item bottom flexrbc">
                            <span><span class="icon">▋</span>未检测总数</span>
                            <span class="num">{{
                                indStatsNsp.data.undetectedNum
                            }}</span>
                            <span class="num"
                                >{{ indStatsNsp.data.undetectedOdds }}%</span
                            >
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 2右侧 -->
        <div
            v-show="!epi.open_detail"
            class="right flexcbh position-re pro-bgcolor544 p-20"
        >
            <pro-title label="核酸检测率排行"></pro-title>

            <div
                class="right-content fx1 flexcsh"
                v-loading="loading"
                element-loading-background="rgba(0, 0, 0, 0.3)"
            >
                <div class="search_box s_box2 m-b10">
                    <!-- <el-input
                        v-model="epi.queryForm.gridName"
                        placeholder="请输入内容"
                    ></el-input> -->
                    <el-select
                        v-model="rankNsp.queryForm.roundId"
                        placeholder="请选择核酸轮次"
                    >
                        <el-option
                            v-for="(item, index) in rankNsp.roundTypes"
                            :key="index"
                            :label="item.label"
                            :value="item.value"
                        />
                    </el-select>
                    <div class="search_btn flexrcc" @click="searchCompany">
                        <span class="txt">查 看</span>
                    </div>
                    <div
                        class="reset_btn flexrcc"
                        @click.stop="() => searchRecentRound()"
                    >
                        <span class="txt">最近一次</span>
                    </div>
                    <div></div>
                    <div
                        class="sort_btn fx1 flexrcc"
                        :class="epi.queryForm.sort_by ? '' : 'active'"
                        @click="searchCompany(3)"
                    >
                        <span class="txt">倒序</span>
                    </div>
                    <div
                        class="sort_btn fx1 flexrcc"
                        :class="epi.queryForm.sort_by ? 'active' : ''"
                        @click="searchCompany(4)"
                    >
                        <span class="txt">正序</span>
                    </div>
                </div>
                <!-- :columns="rankNsp.columns"
                        :data-list="rankNsp.listData" -->
                <div class="fx1 hidden">
                    <StaticTable
                        :columns="rankNsp.columns"
                        :data-list="epi.data"
                        headBg="rgba(22, 159, 196, 0.2)"
                        border_color="rgba(0, 0, 0, 0)"
                        :show_head="true"
                        rowHeight="40"
                        @onRow="onRow2"
                    >
                        <template v-slot:title="scope">
                            <div class="title_box">{{ scope.row.title }}</div>
                        </template>

                        <template v-slot:col4="scope">
                            <el-progress
                                class="process_line"
                                :percentage="scope.row.col4"
                                :show-text="true"
                                :text-inside="false"
                                style="
                                    height: 100%;
                                    align-items: center;
                                    display: flex;
                                "
                                :stroke-width="9"
                            ></el-progress>
                        </template>
                    </StaticTable>
                </div>
            </div>
        </div>

        <!-- 4弹窗列表 -->
        <div class="dialog_box flexrcc" v-if="epi.open_detail">
            <ListDetail :title="epi.detail_title" @close_info="onCloseInfo">
                <div class="full-screen flexcsh">
                    <div class="p-row30">
                        <EpiContentNav
                            :list="epi.detail_btn"
                            @change="changeContent"
                        ></EpiContentNav>
                    </div>

                    <div
                        v-if="epi.cut_content == 1"
                        class="dialog_content1 flexrbh fx1"
                    >
                        <div class="item top fx1 m-r10 hidden">
                            <div class="flexrsc m-b10">
                                <div class="label">主管部门:</div>
                                <div class="value">{{ "市场监管局" }}</div>
                            </div>
                            <div class="flex of-xhya scroll_bar">
                                <div class="label">行业企业:</div>
                                <div class="">
                                    <div
                                        v-for="(
                                            item, index
                                        ) in industryInfoList"
                                        :key="index"
                                    >
                                        <span class="w-text pointer">{{
                                            item.name
                                        }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="item bottom flexcsh fx1">
                            <div class="flexrsc m-b10">
                                <div class="label">负责人:</div>
                                <div class="value">{{ "黄大强" }}</div>
                                <div class="tel">{{ "18878947894" }}</div>
                            </div>
                            <div class="flex of-xhya scroll_bar">
                                <div class="label">网格员:</div>
                                <div class="">
                                    <div
                                        v-for="(item, index) in epi.data12"
                                        :key="index"
                                    >
                                        <span class="value">{{
                                            item.title
                                        }}</span>
                                        <span class="tel">{{ item.col3 }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div
                        v-else-if="epi.cut_content == 2"
                        class="dialog_content2 full-screen flexcb"
                    >
                        <div class="flexrbh m-b10">
                            <div class="info_box fx1 flexrcc m-r20">
                                <span class="label">员工人数: </span>
                                <span class="value">{{ 564 }}</span>
                            </div>
                            <div class="search_box fx1 s_box">
                                <el-input
                                    v-model="epi.queryForm12.gridName"
                                    placeholder="请输入内容"
                                ></el-input>
                                <div
                                    class="search_btn flexrcc"
                                    @click="searchCompany12"
                                >
                                    <span class="txt">搜 索</span>
                                </div>
                                <div
                                    class="reset_btn flexrcc"
                                    @click="searchCompany12(2)"
                                >
                                    <span class="txt">重 置</span>
                                </div>
                            </div>
                        </div>

                        <div class="fx1 hidden">
                            <StaticTable
                                :columns="epi.columns12"
                                :data-list="epi.data12"
                                headBg="rgba(22, 159, 196, 0.2)"
                                border_color="rgba(22, 159, 196, 0.25)"
                                headHeight="40"
                            >
                                <template v-slot:col4="{ row }">
                                    <div class="census epi_census">
                                        {{ row.col4 }}
                                    </div>
                                </template>
                            </StaticTable>
                        </div>
                        <!-- 分页 -->
                        <ProPage
                            :pages="epi.pages12"
                            ref="ref_page12"
                            @on_page="changePage($event, 12)"
                        ></ProPage>
                    </div>
                    <div
                        v-else-if="epi.cut_content == 3"
                        class="dialog_content3 full-screen flexcb"
                    >
                        <div class="select_box flexrsc m-b20">
                            <span class="icon">*</span>
                            <span class="label">检测轮次</span>
                            <div class="select_grade m-r30">
                                <el-select
                                    v-model="epi.queryForm12.num"
                                    placeholder=""
                                >
                                    <el-option
                                        v-for="item in epi.options12"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                    >
                                    </el-option>
                                </el-select>
                            </div>
                            <div
                                class="search_btn flexrcc m-r20"
                                @click="searchCompany13"
                            >
                                <span class="txt">查 看</span>
                            </div>
                            <div
                                class="reset_btn flexrcc"
                                @click="searchCompany13(2)"
                            >
                                <span class="txt">最近一次</span>
                            </div>
                        </div>
                        <div class="data_box fx1">
                            <div class="box1 flexcbh">
                                <div class="box1_top flexccc m-b20">
                                    <div class="">
                                        <span class="num text">1530</span>
                                        <span class="unit text">人</span>
                                    </div>
                                    <div class="label">员工数量</div>
                                </div>
                                <div class="box1_bottom fx1 flexcbh">
                                    <div class="fx1 flexccc">
                                        <div class="flexrbc">
                                            <span class="num text">97.64%</span>
                                            <div class="rise">
                                                <span
                                                    class="iconfont icon-shangsheng"
                                                ></span>
                                                <span>-0.52%</span>
                                            </div>
                                        </div>
                                        <div class="label">本轮检测率</div>
                                    </div>
                                    <div class="fx1 flexccc">
                                        <div class="">
                                            <span class="num text">98.16%</span>
                                        </div>
                                        <div class="label">上轮检测率</div>
                                    </div>
                                </div>
                            </div>
                            <div class="box2 flexcbh">
                                <div class="box2_top fx1 m-b20 flexcbc">
                                    <div class="chart_box flexrcc m-b10">
                                        <pie-chart
                                            :seriesData="epi.seriesDataPie"
                                            :extraOption="epi.extraOptionPie"
                                        ></pie-chart>
                                    </div>
                                    <div class="info flexcc fx1">
                                        <div class="item top flexrbc m-b10">
                                            <span
                                                ><span class="icon">▋</span
                                                >本轮已检测</span
                                            >
                                            <span class="num">1494</span>
                                            <span class="num">97.64%</span>
                                        </div>
                                        <div class="item bottom flexrbc">
                                            <span
                                                ><span class="icon">▋</span
                                                >本轮未检测</span
                                            >
                                            <span class="num">36</span>
                                            <span class="num">2.36%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="box2_bottom flexcc">
                                    <span class="label m-b10"
                                        >本轮新增未测 (人)</span
                                    >
                                    <span class="num">34</span>
                                </div>
                            </div>
                            <div class="box3 flexcbh">
                                <div class="box3_top fx1 m-b20 flexcbc">
                                    <div class="chart_box flexrcc m-b10">
                                        <pie-chart
                                            :seriesData="epi.seriesDataPie2"
                                            :extraOption="epi.extraOptionPie2"
                                        ></pie-chart>
                                    </div>
                                    <div class="info flexcc fx1">
                                        <div class="item top flexrbc m-b10">
                                            <span
                                                ><span class="icon">▋</span
                                                >已核实总数</span
                                            >
                                            <span class="num">36</span>
                                            <span class="num">100%</span>
                                        </div>
                                        <div class="item bottom flexrbc">
                                            <span
                                                ><span class="icon">▋</span
                                                >未核实总数</span
                                            >
                                            <span class="num">0</span>
                                            <span class="num">0%</span>
                                        </div>
                                    </div>
                                </div>
                                <div class="box3_bottom flexcc">
                                    <span class="label m-b10"
                                        >近两轮均未测 (人)</span
                                    >
                                    <span class="num">2</span>
                                </div>
                            </div>
                            <div class="box4 flexcbc">
                                <div class="box41">
                                    <gauge-chart
                                        :seriesData="epi.seriesDataGauge"
                                        :seriesData2="epi.seriesDataGauge2"
                                        :extraOption="epi.extraOptionsGauge"
                                    ></gauge-chart>
                                </div>
                                <div class="box42 m-b10 flexrcc">
                                    上轮整改率
                                </div>
                                <div class="box43 m-b10 flexccc">
                                    <div class="">
                                        <span class="num text">28</span>
                                        <span class="unit text">人</span>
                                    </div>
                                    <div class="label">上轮未测</div>
                                </div>
                                <div class="box44 flexccc">
                                    <div class="">
                                        <span class="num text">26</span>
                                        <span class="unit text">人</span>
                                    </div>
                                    <div class="label">其中本轮检测</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div
                        v-else-if="epi.cut_content == 4"
                        class="dialog_content4 full-screen flexcb"
                    >
                        <div class="fx1 hidden">
                            <StaticTable
                                :columns="epi.columns14"
                                :data-list="epi.data14"
                                headBg="rgba(22, 159, 196, 0.2)"
                                border_color="rgba(22, 159, 196, 0.25)"
                                headHeight="40"
                            >
                                <template v-slot:col5="{ row }">
                                    <div class="epi_census">
                                        {{ row.col5 }}
                                    </div>
                                </template>
                            </StaticTable>
                        </div>
                        <!-- 分页 -->
                        <ProPage
                            :pages="epi.pages12"
                            ref="ref_page12"
                            @on_page="changePage($event, 12)"
                        ></ProPage>
                    </div>
                </div>
            </ListDetail>
        </div>

        <!-- 地图弹出 -->
        <div v-if="map_dialog">
            <ProDialog @myclose="onMapClose"></ProDialog>
        </div>
    </div>
</template>

<script>
import ProTitle from "@/components/Pro/ProTitle";
import ProTitle2 from "@/components/Pro/ProTitle2";
import StaticTable from "@/components/Common/StaticTable.vue";
import ProShade from "./ProShade";
import PieChart from "@/components/Chart/PieChart/PieChart.vue";
import LineChart from "@/components/Chart/LineChart/LineChart.vue";
import BarChart from "@/components/Chart/BarChart/BarChart.vue";
import ListDetail from "./ListDetail";
import DynamicTable from "@/components/Common/DynamicTable.vue";
import ProPage from "./ProPage";
import EpiContentNav from "./EpiContentNav";
import ProDialog from "./ProDialog";
import GaugeChart from "@/components/Chart/GaugeChart/GaugeChart.vue";
// import {
//     getCompareResultPage,
//     getDetectInfo,
//     getGridInfo,
//     getKeyIndustry,
//     getPeopleNumIncustry,
// } from "@/api/epiview.js";
import { getKeyIndStats, getKeyIndRank } from "@/api/industry.js";
import { getAllRound } from "@/api/epidemic.js";

import { fitChartSize } from "@/utils/styleUtil.js";

import { my_option } from "@/utils/mock/proview/industry";
import { people } from "@/utils/mock/proview/people";

import {
    getCompany,
    listCompanyWork,
    listWork,
    detailWork,
} from "@/api/proview.js";

export default {
    name: "NavIndustry",
    components: {
        ProTitle,
        ProTitle2,
        DynamicTable,
        StaticTable,
        ProShade,
        PieChart,
        LineChart,
        BarChart,
        ListDetail,
        ProPage,
        EpiContentNav,
        ProDialog,
        GaugeChart,
    },
    props: {
        company_type: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            map_dialog: false,
            loading: false,
            loading2: false,
            compnyType: false,
            indStatsNsp: {
                data: {
                    detectedNum: 0, // 已检测总数
                    detectedOdds: 0, // 已检测率
                    industryNum: 0, // 行业数量
                    peopleNum: 0, // 从业人数
                    undetectedNum: 0, // 未检测总数
                    undetectedOdds: 0, // 未检测率
                },
                seriesData: [
                    {
                        name: "已完成",
                        value: 35698,
                    },
                    {
                        name: "未完成",
                        value: 2405,
                    },
                ],
                extraOption: {
                    title: {
                        text: "94%",
                        textStyle: {
                            color: "#2DCCFF",
                            fontSize: fitChartSize(40),
                        },
                        left: "center",
                        top: "middle",
                    },
                    tooltip: {
                        trigger: "item",
                        position: [140, 10],
                    },

                    legend: {
                        show: false,
                    },
                    color: [
                        "#2DCCFF",
                        "#EE9068",
                        "rgba(42, 174, 250, 1)",
                        "rgba(2, 113, 244, 1)",
                        "rgba(26, 66, 142, 1)",
                        "rgba(72, 140, 247, 1)",
                        "rgba(56, 202, 251, 1)",
                    ],
                    series: [
                        {
                            radius: [fitChartSize(55), fitChartSize(75)],
                            left: 0,
                            name: "检测率",
                            type: "pie",
                            // roseType: "radius",
                            top: "middle",
                            // height: '33.33%',
                            // width: 400,
                            avoidLabelOverlap: false,
                            selectedMode: "single", // 选中效果    multiple
                            selectedOffset: 20, // 选中偏移量
                            itemStyle: {
                                borderRadius: 0,
                                // borderColor: 'rgba(41, 49, 64, 0.4)',
                                borderWidth: 5,
                            },
                            label: {
                                show: false,
                                position: "outside",
                            },
                            emphasis: {
                                label: {
                                    show: false,
                                    fontSize: fitChartSize(14),
                                    fontWeight: "400",
                                    color: "#FFF",
                                },
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                            labelLine: {
                                show: false,
                            },
                        },
                    ],
                },
            },
            rankNsp: {
                roundTypes: [],
                listData: [],
                columns: [
                    {
                        label: "序号",
                        prop: "title",
                        width: "60",
                        isSlot: true,
                    },
                    {
                        label: "行业名称",
                        prop: "col2",
                        width: "100",
                    },
                    {
                        label: "主管部门",
                        prop: "col3",
                    },
                    {
                        label: "",
                        prop: "col4",
                        width: "370",
                        isSlot: true,
                    },
                    {
                        label: "检测人员/从业人数",
                        prop: "col5",
                        width: "150",
                    },
                    {
                        label: "检测率",
                        prop: "col6",
                        // isSlot: true,
                    },
                ],
                queryForm: {
                    gridId: "",
                    roundId: "",
                },
            },
            //信息-------------------------------
            epi: {
                open_detail: false,
                detail_title: "农贸市场",
                seriesDataPie0: [
                    {
                        name: "已完成",
                        value: 35698,
                    },
                    {
                        name: "未完成",
                        value: 2405,
                    },
                ],
                extraOptionPie0: my_option.extraOptionPie0,

                data: [
                    {
                        title: 1,
                        col2: "农贸市场",
                        col3: "市场监管局",
                        col4: 99.66,
                        col5: "4742/4758",
                        col6: "99.66%",
                    },
                    {
                        title: 2,
                        col2: "网吧",
                        col3: "文旅局",
                        col4: 99.31,
                        col5: "721/726",
                        col6: "99.31%",
                    },
                    {
                        title: 3,
                        col2: "快递",
                        col3: "邮政局",
                        col4: 98.79,
                        col5: "8621/8727",
                        col6: "98.79%",
                    },
                    {
                        title: 4,
                        col2: "外卖",
                        col3: "市场监管局",
                        col4: 98.47,
                        col5: "6421/6521",
                        col6: "98.47%",
                    },
                    {
                        title: 5,
                        col2: "冷链经营单位",
                        col3: "市场监管局",
                        col4: 95,
                        col5: "2582/2718",
                        col6: "95%",
                    },
                    {
                        title: 6,
                        col2: "生产车间",
                        col3: "科商工信局",
                        col4: 90.83,
                        col5: "8921/9812",
                        col6: "90.83%",
                    },
                    {
                        title: 7,
                        col2: "宾馆酒店",
                        col3: "文旅局",
                        col4: 84.39,
                        col5: "1821/2181",
                        col6: "84.39%",
                    },
                    {
                        title: 8,
                        col2: "ktv",
                        col3: "文旅局",
                        col4: 75.62,
                        col5: "465/562",
                        col6: "75.62%",
                    },
                    {
                        title: 9,
                        col2: "普货",
                        col3: "文旅局",
                        col4: 70.11,
                        col5: "1281/1287",
                        col6: "70.11%",
                    },
                    {
                        title: 10,
                        col2: "电影院",
                        col3: "文旅局",
                        col4: 63.74,
                        col5: "172/271",
                        col6: "63.74%",
                    },
                ],
                table_date: null,
                pages: 1,
                columns1: my_option.columns1,
                cut_companyid: "",
                queryForm: {
                    sort_by: false, // asc (true) 正序  desc(false) 倒序
                    gridName: "",
                },

                data2: [
                    { title: 1, col2: "xxxxgss公司", col3: "xxv镇", col4: 234 },
                ],
                columns2: my_option.columns2,
                queryForm2: {
                    current: 1,
                    size: 10,
                    level: 0,
                    gridName: "",
                    sortList: [
                        {
                            asc: false,
                            column: "",
                        },
                    ],
                },
                total2: 1,
                pages2: 1,

                // 详情-----
                cut_content: 1,
                detail_btn: [
                    { label: "行业信息", id: 1 },
                    { label: "从业人员", id: 2 },
                    { label: "检测信息", id: 3 },
                    { label: "对比名单", id: 4 },
                ],
                queryForm12: {
                    company_id: "",
                    current: 1,
                    size: 13,
                    name: "",
                },
                columns12: my_option.columns12,
                data12: [
                    {
                        title: "张",
                        col2: "450320199911112121",
                        col3: "18579795555",
                        col4: "户籍人口",
                    },
                ],
                total12: 1,
                pages12: 1,

                seriesDataPie: [
                    {
                        name: "已完成",
                        value: 80,
                    },
                    {
                        name: "未完成",
                        value: 20,
                    },
                ],
                extraOptionPie: my_option.extraOptionPie,
                seriesDataPie2: [
                    {
                        name: "已完成",
                        value: 80,
                    },
                    {
                        name: "未完成",
                        value: 20,
                    },
                ],
                extraOptionPie2: my_option.extraOptionPie2,
                seriesDataGauge: [
                    {
                        value: 92.85,
                        // name: "整改",
                    },
                ],
                seriesDataGauge2: [
                    {
                        value: 92.85,
                        // name: "整改",
                    },
                ],
                extraOptionsGauge: my_option.extraOptionsGauge,
                queryForm14: {
                    company_id: "",
                    current: 1,
                    size: 13,
                    name: "",
                },
                columns14: my_option.columns14,
                data14: [
                    {
                        title: 1,
                        col2: "张xx",
                        col3: "450320199911112121",
                        col4: "18579795555",
                        col5: "户籍人口",
                        col6: "忘记",
                        col7: "是",
                        col8: "铁山港医院",
                        col9: "2022-08-28",
                    },
                ],
                total14: 1,
                pages14: 1,
            },
            // 地图点的集合
            MarkerData: [],

            // 弹出层--------------------------
            list_columns: my_option.list_columns,
            list_info: [],
            open_detail2: false,
            detail2_title: "作业明细",
            detail2_info: {},

            industryInfoList: [
                {
                    name: "南康中心市场",
                },
                {
                    name: "南康市场",
                },
                {
                    name: "南康旧市场",
                },
                {
                    name: "南康镇鹧鸪塘便民疏导点",
                },
                {
                    name: "兴港镇富屋便民综合市场",
                },
                {
                    name: "兴港镇南乐市场",
                },
                {
                    name: "兴港镇石头埠便民疏导点",
                },
                {
                    name: "兴港镇赤江便民疏导点",
                },
                {
                    name: "兴港镇七号路市场",
                },
                {
                    name: "兴港镇民福市场",
                },
                {
                    name: "兴港镇川江便民疏导点",
                },
                {
                    name: "营盘镇石村市场",
                },
            ],
        };
    },
    computed: {},

    watch: {},

    created() {
        this.getData();
        this.getData2();
        this.temporaryData();
    },
    mounted() {},
    methods: {
        async getData() {
            this.getKeyIndStats();
            await this.getAllRound();
            // this.getKeyIndRank();
        },
        // 获取全部核酸轮次
        getAllRound() {
            return getAllRound().then((res) => {
                this.rankNsp.roundTypes = res.data.map((item) => ({
                    label: item.title,
                    value: item.id,
                }));
                this.rankNsp.queryForm.roundId =
                    this.rankNsp.roundTypes[0].value;
                return res;
            });
        },
        // 获取行业统计
        getKeyIndStats() {
            return getKeyIndStats().then((res) => {
                this.indStatsNsp.data = res.data;
                this.indStatsNsp.seriesData = [
                    {
                        name: "已检测总数",
                        value: res.data.detectedNum,
                    },
                    {
                        name: "未检测总数",
                        value: res.data.undetectedNum,
                    },
                ];
                const sum = res.data.detectedNum + res.data.undetectedNum;
                this.indStatsNsp.extraOption.title.text = `${(
                    (res.data.detectedNum / sum) *
                    100
                ).toFixed(1)}%`;
                return res;
            });
        },
        getKeyIndRank() {
            return getKeyIndRank(this.rankNsp.queryForm).then((res) => {
                this.rankNsp.listData = res.data.map((item) => {
                    return {
                        title: item.sequence,
                        col2: item.gridName,
                        col3: item.parentGridName,
                        col4: item.ratio,
                        col5: item.peopleNumber,
                        col6: item.ratio,
                    };
                });
                return res;
            });
        },
        searchRecentRound() {},
        //临时假数据
        temporaryData() {
            this.epi.data12 = people.list_columns.map((item) => {
                return {
                    title: item.name,
                    col2: item.code,
                    col3: item.phone,
                    col4: item.tag2,
                };
            });
        },
        /** 关闭地图的消息弹窗(给父组件调用) */
        closeMap(id) {
            this.MarkerData.forEach((item) => {
                if (id == this.epi.cut_companyid) {
                    // 点击x号 关闭 当前消息窗口
                    item.grade = 28;
                } else {
                    // 点击另外的地图标点, 关闭旧窗口, 打开新窗口时, 保留新窗口的icon高亮
                    if (item.id != this.epi.cut_companyid) {
                        item.grade = 28;
                    }
                }
            });
        },
        /** 点击地图弹窗详情(给父组件调用) */
        detailMap(id) {
            this.epi.open_detail = true;
            // this.epi.cut_companyid = id;
        },
        /** 点击表格的某行 */
        onRow2(row) {
            this.epi.open_detail = true;
        },
        /** 点击企业列表 的某列 */
        onClick(row, col) {
            // if (col.prop == "title") {
            //     this.epi.open_detail = true;
            //     this.epi.detail_title = row.title;
            //     // this.getCompany(row.id);
            //     this.epi.cut_companyid = row.id;
            //     this.epi.open_detail = true;
            // } else if (col.prop == "col3") {
            //     this.getIntroduction(row.id, true);
            // } else if (col.prop == "col4") {
            //     this.epi.open_detail = false;
            //     this.detail_title = row.title;
            //     this.epi.queryForm2.company_id = row.id;
            //     this.epi.queryForm2.current = 1;
            //     if (this.$refs["ref_page2"])
            //         this.$refs["ref_page2"].resetPage();
            //     this.listWork();
            // }
            // this.$emit("onClick", row, col);
        },
        //
        onClickDetail(row, col) {
            this.detail2_title = row.col3;
            if (col.prop == "col7") {
                this.open_detail2 = true;
                this.detailWork(row.id);
            }
        },
        /** 关闭列表明细 */
        onCloseInfo() {
            this.epi.open_detail = false;
        },
        /** 关闭详情 */
        onCloseDetail() {
            this.open_detail2 = false;
        },
        /** 重置弹窗数据 */
        reset() {
            this.epi.open_detail = false;
            this.$refs["ref_detail"].reset();
        },
        /** 分页切换 */
        changePage(num, type) {
            if (type == 28) {
                this.epi.queryForm2.current = num;
                this.listData2();
            }
        },

        /** 搜索 */
        searchCompany(type = 1) {
            // this.epi.queryForm2.current = 1;
            // if(this.$refs['ref_page2']) this.$refs['ref_page2'].resetPage()
            if (type == 2) {
                this.epi.queryForm.date = "";
                this.epi.table_date = null;
            } else if (type == 3) {
                this.epi.queryForm.sort_by = false;
            } else if (type == 4) {
                this.epi.queryForm.sort_by = true;
            }
            // this.getData();
        },
        /** 搜索 */
        searchCompany2(type = 1) {
            this.epi.queryForm2.current = 1;
            if (this.$refs["ref_page2"]) this.$refs["ref_page2"].resetPage();
            if (type == 2) {
                this.epi.queryForm2.gridName = "";
            }
            this.getData2();
        },
        /** 搜索 */
        searchCompany12(type = 1) {
            // this.epi.queryForm12.current = 1;
            // if (this.$refs["ref_page12"]) this.$refs["ref_page12"].resetPage();
            // if (type == 2) {
            //     this.epi.queryForm12.name = "";
            // }
            // this.getData12();
        },
        /** 搜索 */
        searchCompany13(type = 1) {
            // this.epi.queryForm12.current = 1;
            // if (this.$refs["ref_page12"]) this.$refs["ref_page12"].resetPage();
            // if (type == 2) {
            //     this.epi.queryForm12.gridName = "";
            // }
            // this.getData12();
        },

        /** 弹窗列表数据 */
        listWork() {
            listWork(this.epi.queryForm2).then((res) => {
                if (res.code == 0) {
                    this.epi.pages = res.data.pages;
                    this.list_info = res.data.data.map((item) => {
                        return {
                            id: item.id,
                            title: item.work_start_time,
                            col2: item.work_end_time,
                            col3: item.work_name,
                            col4: item.type,
                            col5: item.header,
                            col6: item.result,
                            col7: "详情",
                        };
                    });
                }
            });
        },
        /** 弹窗详情数据 */
        detailWork(id) {
            detailWork({ work_id: id }).then((res) => {
                if (res.code == 0) {
                    let data = res.data;
                    let temp = {
                        left: [
                            {
                                label: "特殊作业名称",
                                value: data.work_name,
                            },
                            {
                                label: "类型",
                                value: data.type,
                                is_type: false,
                            },
                            {
                                label: "操作人",
                                value: data.work_user_name,
                                is_list: false,
                            },
                            {
                                label: "操作时间",
                                value: data.work_start_time,
                            },
                            {
                                label: "现场负责人",
                                value: data.header,
                            },
                            {
                                label: "操作方案",
                                value: data.work_norms,
                            },
                            {
                                label: "作业结果",
                                value: data.result,
                                is_result: false,
                            },
                            {
                                label: "操作过程",
                                value: data.process,
                                is_card: true,
                            },
                        ],
                    };
                    this.detail2_info = temp;
                }
            });
        },
        /** 弹窗内容切换 */
        changeContent(id) {
            this.epi.cut_content = id;
        },

        /** 左侧列表数据 */
        // getData() {
        //     if (this.epi.table_date) {
        //         this.epi.queryForm.date = this.parseTime(
        //             this.epi.table_date,
        //             "{y}-{m}-{d}"
        //         );
        //     } else {
        //         this.epi.queryForm.date = "";
        //     }

        //     this.loading = true;
        //     let temp = {
        //         sort_by: this.epi.queryForm.sort_by ? "asc" : "desc",
        //         gridName: this.epi.queryForm.gridName,
        //         date: this.epi.queryForm.date,
        //     };
        //     listCompanyWork(temp).then((res) => {
        //         if (res.code == 0) {
        //             this.epi.data = res.data.records.map((item, index) => {
        //                 return {
        //                     id: item.id,
        //                     title: index + 1,
        //                     col2: "xxxxxw网络",
        //                     col3: 90,
        //                 };
        //             });
        //             this.MarkerData = res.data.records.map((item) => {
        //                 return {
        //                     id: item.id,
        //                     lng: item.lng,
        //                     lat: item.lat,
        //                     content: {
        //                         name: item.gridName,
        //                     },
        //                     introduction: null,
        //                     grade: 28,
        //                 };
        //             });
        //             this.$emit("marker", this.MarkerData);
        //         } else {
        //             this.epi.data = [];
        //         }
        //         this.loading = false;
        //     });
        // },
        /** 右侧列表数据 */
        getData2() {
            // this.loading2 = true;
            // let temp = {
            //     current: this.epi.queryForm2.current,
            //     size: this.epi.queryForm2.size,
            //     level: this.epi.queryForm2.level,
            //     gridName: this.epi.queryForm2.gridName,
            // };
            // getCompareResultPage(temp).then((res) => {
            //     if (res.code == 0) {
            //         this.epi.data2 = res.data.records.map((item, index) => {
            //             return {
            //                 id: item.id,
            //                 title: index + 1,
            //                 col2: item.gridName,
            //                 col3: item.type || "-",
            //                 col4: item.count || "-",
            //             };
            //         });
            //     } else {
            //         this.epi.data2 = [];
            //     }
            //     this.loading2 = false;
            // });
        },
        /** 点击地图标点emit=false  点击table弹出简介信息时emit=true */
        getIntroduction(id, emit = false) {
            this.epi.cut_companyid = id;
            getCompany(id).then((res) => {
                if (res.code == 0) {
                    let data = res.data;
                    this.epi.detail_title = data.company_name;

                    let temp = [
                        {
                            label: "名称",
                            value: data.company_name,
                        },
                        {
                            label: "行业类型",
                            value: "-",
                            is_industry: true,
                        },
                        {
                            label: "法定代表人",
                            value: data.legal_name,
                        },
                        {
                            label: "法人电话",
                            value: data.legal_phone,
                            is_tel: false,
                        },
                        {
                            label: "查看详情",
                            value: "",
                            is_detail: true,
                            is_video: false,
                        },
                    ];

                    this.MarkerData.forEach((item) => {
                        if (item.id == id) {
                            item.introduction = temp;
                            item.grade = 31;
                            if (emit) {
                                this.$emit("onClick", item); // 点击table某列 响应的事件
                            } else {
                                this.$emit("changeFlag", item); // 点击地图icon 响应的事件
                            }
                        } else {
                            item.grade = 28;
                        }
                    });
                }
            });
        },
        /** 点击地图覆盖物emit=false  点击table弹出简介信息时emit=true */
        getIntroduction2(obj, emit = false) {
            this.map_dialog = true;
        },
        onMapClose() {
            this.map_dialog = false;
        },
    },
};
</script>

<style lang="scss">
.el-image-viewer__wrapper {
    top: vh(100);
    bottom: vh(100);
    left: vh(200);
    right: vh(200);
}

.el-loading-spinner .circular .path {
    stroke: #2ef7fc !important;
}

.el-progress__text {
    color: #fff;
    margin-left: vw(24);
}
.el-progress-bar__inner {
    border-radius: vw(1);
    background: linear-gradient(90deg, #0f699c 0%, #49d4ff 100%);
}
</style>

<style lang="scss" scoped>
.container {
    ::v-deep .el-input__inner {
        color: white;
    }
    ::v-deep .el-input--medium .el-input__inner {
        background-color: #002440;
        border: 1px solid #094666;
    }
    .process_line {
        width: vw(300);
        ::v-deep .el-progress-bar__outer {
            border-radius: 0;
            background-color: rgba(255, 255, 255, 0.1);
        }
    }
    .left {
        position: absolute;
        z-index: 12;
        left: vw(30);
        top: vh(88);
        bottom: vh(300);
        width: vw(484);
        .count {
            .item {
                background: url("~@/assets/images/proview/squ.png") no-repeat;
                background-size: 100% 100%;
                .num {
                    font-family: "D-DIN";
                    font-weight: 700;
                    font-size: vw(40);
                    background: linear-gradient(
                        180deg,
                        #61ffff 0%,
                        #2dcdff 100%
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    text-fill-color: transparent;
                }
                .unit {
                    font-family: "D-DIN";
                    font-size: vw(14);
                    background: linear-gradient(
                        180deg,
                        #61ffff 0%,
                        #2dcdff 100%
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    text-fill-color: transparent;
                }
                .label {
                    color: #fff;
                    font-size: vw(16);
                }
            }
        }
        .chart_box {
            .chart {
                width: vw(165);
                height: vw(165);
                background: url("~@/assets/images/proview/pie_industry.png")
                    no-repeat;
                background-size: 100% 100%;
            }
            .info {
                .item {
                    padding: vh(10) vw(12);
                    color: #fff;
                    .num {
                        font-family: "D-DIN";
                        font-style: normal;
                        font-weight: 700;
                        font-size: vw(20);
                    }
                }
                .top {
                    background: rgba(22, 159, 196, 0.2);
                    border: 1px solid rgba(22, 159, 196, 0.25);
                    .icon {
                        color: #2dcdff;
                    }
                }
                .bottom {
                    background: rgba(238, 144, 104, 0.2);
                    border: 1px solid rgba(238, 144, 104, 0.25);
                    .icon {
                        color: #ee9068;
                    }
                }
            }
        }
    }

    .right {
        position: absolute;
        z-index: 12;
        left: vw(550);
        top: vh(88);
        bottom: vh(40);
        width: vw(1024);
        .sort_btn {
            cursor: pointer;
            padding: 0px 10px;
            height: vh(32);
            background: #002440; // 16171F
            border: 1px solid rgba(22, 159, 196, 0.25);
            .txt {
                font-size: 14px;
                color: white;
            }
            &.active {
                background: rgba(22, 159, 196, 0.2);
                .txt {
                    color: #61ffff;
                }
            }
        }
        .title_box {
            padding: 0 vw(8);
            min-width: vw(24);
            text-align: center;
            background: rgba(22, 159, 196, 0.2);
            border: 1px solid rgba(45, 205, 255, 0.24);
            border-radius: 2px;
            color: #2dcdff;
        }
    }

    .iconfont {
        margin-right: vw(5);
    }

    // 弹出层
    .dialog_box {
        position: absolute;
        z-index: 15;
        left: 0;
        top: vh(56);
        height: calc(100% - vh(56));
        width: 100%;
        background: rgba(0, 6, 17, 0.5);
        backdrop-filter: blur(20px);

        .dialog_content1 {
            .item {
                width: vw(480);
                border: 1px solid rgba(22, 159, 196, 0.25);
                padding: vh(24) vw(20);

                .label {
                    color: #fff;
                    margin-right: vw(30);
                }
                .value {
                    color: #2ef7fc;
                }
                .tel {
                    margin-left: vw(10);
                    color: #fff;
                }
            }
            .top {
                background: rgba(22, 159, 196, 0.2);
            }
            .bottom {
                // background: rgba(22, 159, 196, 0.2);
            }
        }
        .dialog_content2 {
            .info_box {
                background: rgba(22, 159, 196, 0.2);
                border: 1px solid rgba(22, 159, 196, 0.25);
                .label {
                    color: #fff;
                    margin-right: vw(10);
                }
                .value {
                    font-family: "D-DIN";
                    font-weight: 700;
                    font-size: vw(24);
                    background: linear-gradient(
                        180deg,
                        #61ffff 0%,
                        #2dcdff 100%
                    );
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                    background-clip: text;
                    text-fill-color: transparent;
                }
            }
        }
        .dialog_content3 {
            .select_box {
                .icon {
                    color: #2ef7fc;
                }
                .label {
                    color: #fff;
                    margin-left: vw(5);
                }
                .select_grade {
                    margin-left: vw(20);
                }
                .search_btn {
                    width: vw(100);
                    cursor: pointer;
                    height: vh(36);
                    background: linear-gradient(
                        180deg,
                        #033748 0%,
                        #169fc4 100%
                    );
                    border: 1px solid rgba(41, 173, 249, 0.4);
                    .txt {
                        font-size: 14px;
                        color: white;
                    }
                }
                .reset_btn {
                    width: vw(100);
                    cursor: pointer;
                    height: vh(36);
                    background: #002440; // 16171F
                    border: 1px solid rgba(41, 173, 249, 0.4);
                    .txt {
                        font-size: 14px;
                        color: white;
                    }
                }
            }
            .data_box {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                grid-template-rows: 1fr;
                gap: 0 vh(20);
                .box1 {
                    border: 1px solid rgba(22, 159, 196, 0.3);
                    padding: vw(20);
                    .box1_top {
                        height: vh(127);
                        background: url("~@/assets/images/proview/box1_top.png")
                            no-repeat;
                        background-size: 100% 100%;
                        .text {
                            font-family: "D-DIN";
                            font-style: normal;
                            font-weight: 700;
                            background: linear-gradient(
                                180deg,
                                #61ffff 0%,
                                #2dcdff 100%
                            );
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            background-clip: text;
                            text-fill-color: transparent;
                        }
                        .num {
                            font-size: vw(40);
                        }
                        .unit {
                            font-size: vw(14);
                        }
                        .label {
                            color: #ffffff;
                        }
                    }
                    .box1_bottom {
                        border: 1px solid rgba(22, 159, 196, 0.3);
                        background: linear-gradient(
                            180deg,
                            rgba(22, 159, 196, 0.12) 0%,
                            rgba(22, 159, 196, 0) 100%
                        );
                        padding: vw(10);
                        .text {
                            font-family: "D-DIN";
                            font-style: normal;
                            font-weight: 700;
                            background: linear-gradient(
                                180deg,
                                #61ffff 0%,
                                #2dcdff 100%
                            );
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            background-clip: text;
                            text-fill-color: transparent;
                        }
                        .num {
                            font-size: vw(40);
                        }
                        .rise {
                            background: rgba(22, 159, 196, 0.2);
                            border: 1px solid rgba(22, 159, 196, 0.25);
                            border-radius: 2px;
                            color: #ff3a3a;
                            margin-left: vw(10);
                            padding: vh(5) vw(8);
                            font-weight: 600;
                            font-size: vw(16);
                            border-radius: vw(3);
                        }
                        .label {
                            color: #ffffff;
                        }
                    }
                }
                .box2 {
                    .box2_top {
                        border: 1px solid rgba(22, 159, 196, 0.3);
                        padding: vw(20);
                        .chart_box {
                            height: vw(200);
                            width: vw(200);
                            background: url("~@/assets/images/proview/cle.png")
                                no-repeat;
                            background-size: 100% 100%;
                        }
                        .info {
                            width: 100%;
                            .item {
                                // padding: vh(10) vw(12);
                                color: #fff;
                                .num {
                                    font-family: "D-DIN";
                                    font-style: normal;
                                    font-weight: 700;
                                    font-size: vw(20);
                                }
                            }
                            .top {
                                // background: rgba(22, 159, 196, 0.2);
                                // border: 1px solid rgba(22, 159, 196, 0.25);
                                .icon {
                                    color: #2dcdff;
                                }
                            }
                            .bottom {
                                // background: rgba(238, 144, 104, 0.2);
                                // border: 1px solid rgba(238, 144, 104, 0.25);
                                .icon {
                                    color: #ee9068;
                                }
                            }
                        }
                    }

                    .box2_bottom {
                        padding: vw(20);
                        height: vh(84);
                        background: rgba(22, 159, 196, 0.2);
                        border: 1px solid rgba(22, 159, 196, 0.25);
                        .label {
                            color: #ffffff;
                        }
                        .num {
                            font-family: "D-DIN";
                            font-weight: 700;
                            font-size: vw(24);
                            background: linear-gradient(
                                180deg,
                                #ffc27a 0%,
                                #ff9a3d 100%
                            );
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            background-clip: text;
                            text-fill-color: transparent;
                        }
                    }
                }
                .box3 {
                    .box3_top {
                        border: 1px solid rgba(22, 159, 196, 0.3);
                        padding: vw(20);
                        .chart_box {
                            height: vw(200);
                            width: vw(200);
                            background: url("~@/assets/images/proview/cle.png")
                                no-repeat;
                            background-size: 100% 100%;
                        }
                        .info {
                            width: 100%;
                            .item {
                                // padding: vh(10) vw(12);
                                color: #fff;
                                .num {
                                    font-family: "D-DIN";
                                    font-style: normal;
                                    font-weight: 700;
                                    font-size: vw(20);
                                }
                            }
                            .top {
                                // background: rgba(22, 159, 196, 0.2);
                                // border: 1px solid rgba(22, 159, 196, 0.25);
                                .icon {
                                    color: #2dcdff;
                                }
                            }
                            .bottom {
                                // background: rgba(238, 144, 104, 0.2);
                                // border: 1px solid rgba(238, 144, 104, 0.25);
                                .icon {
                                    color: #ee9068;
                                }
                            }
                        }
                    }

                    .box3_bottom {
                        padding: vw(20);
                        height: vh(84);
                        background: rgba(22, 159, 196, 0.2);
                        border: 1px solid rgba(22, 159, 196, 0.25);
                        .label {
                            color: #ffffff;
                        }
                        .num {
                            font-family: "D-DIN";
                            font-weight: 700;
                            font-size: vw(24);
                            background: linear-gradient(
                                180deg,
                                #ff7a7a 0%,
                                #ff3d3d 100%
                            );
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            background-clip: text;
                            text-fill-color: transparent;
                        }
                    }
                }
                .box4 {
                    border: 1px solid rgba(22, 159, 196, 0.3);
                    padding: vw(20);
                    .box41 {
                        height: vh(130);
                        width: 100%;
                    }
                    .box42 {
                        background: rgba(45, 164, 255, 0.1);
                        border: 0.675px solid rgba(45, 204, 255, 0.2);
                        color: #ffffff;
                        height: vw(35);
                        width: vw(180);
                        font-size: vw(13);
                    }
                    .box43,
                    .box44 {
                        height: vh(80);
                        width: vw(180);
                        background: url("~@/assets/images/proview/num_box.png")
                            no-repeat;
                        background-size: 100% 100%;
                        .text {
                            font-family: "D-DIN";
                            font-style: normal;
                            font-weight: 700;
                            background: linear-gradient(
                                180deg,
                                #61ffff 0%,
                                #2dcdff 100%
                            );
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            background-clip: text;
                            text-fill-color: transparent;
                        }
                        .num {
                            font-size: vw(40);
                        }
                        .unit {
                            font-size: vw(14);
                        }
                        .label {
                            color: #ffffff;
                        }
                    }
                }
            }
        }
    }

    ::v-deep .el-progress__text {
        display: none;
    }
}
</style>
